<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>消息中心 - 卡片式任务记录系统</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/message.css">
</head>
<body>
  <div id="app">
    <el-container class="main-container">
      <!-- 头部区域 -->
      <el-header height="auto">
        <div class="header-content">
          <div class="header-left">
            <el-button icon="el-icon-back" @click="goBack">返回</el-button>
            <h2>消息中心</h2>
          </div>
          <div class="header-right">
            <el-button type="danger" size="small" @click="clearMessages" :disabled="!hasMessages">清空消息</el-button>
            <el-button type="primary" size="small" @click="markAllRead" :disabled="!hasUnread">全部已读</el-button>
          </div>
        </div>
      </el-header>
      
      <!-- 主体区域 -->
      <el-container class="message-container">
        <!-- 左侧消息类型 -->
        <el-aside width="240px" class="message-aside">
          <div class="message-tabs">
            <div 
              class="message-tab-item" 
              :class="{ active: activeTab === 'all' }"
              @click="switchTab('all')"
            >
              <i class="el-icon-message"></i>
              <span>所有消息</span>
              <el-badge :value="statistics.total" :hidden="statistics.total === 0"></el-badge>
            </div>
            
            <div 
              class="message-tab-item" 
              :class="{ active: activeTab === 'notification' }"
              @click="switchTab('notification')"
            >
              <i class="el-icon-bell"></i>
              <span>系统通知</span>
              <el-badge :value="statistics.notification" :hidden="statistics.notification === 0"></el-badge>
            </div>
            
            <div 
              class="message-tab-item" 
              :class="{ active: activeTab === 'task' }"
              @click="switchTab('task')"
            >
              <i class="el-icon-tickets"></i>
              <span>任务提醒</span>
              <el-badge :value="statistics.task" :hidden="statistics.task === 0"></el-badge>
            </div>
            
            <div 
              class="message-tab-item" 
              :class="{ active: activeTab === 'comment' }"
              @click="switchTab('comment')"
            >
              <i class="el-icon-chat-line-square"></i>
              <span>评论回复</span>
              <el-badge :value="statistics.comment" :hidden="statistics.comment === 0"></el-badge>
            </div>
            
            <div 
              class="message-tab-item" 
              :class="{ active: activeTab === 'chat' }"
              @click="switchTab('chat')"
            >
              <i class="el-icon-chat-dot-square"></i>
              <span>聊天消息</span>
              <el-badge :value="statistics.chat" :hidden="statistics.chat === 0"></el-badge>
            </div>
          </div>
          
          <div class="contacts-container" v-if="activeTab === 'chat'">
            <div class="contacts-header">
              <span>联系人</span>
              <el-button type="text" icon="el-icon-plus" @click="showNewChatDialog"></el-button>
            </div>
            
            <div class="search-contacts">
              <el-input
                placeholder="搜索联系人"
                prefix-icon="el-icon-search"
                v-model="contactSearchKeyword"
                clearable
              ></el-input>
            </div>
            
            <div class="contacts-list">
              <div 
                v-for="contact in filteredContacts" 
                :key="contact.uuid"
                class="contact-item"
                :class="{ active: currentContact && currentContact.uuid === contact.uuid }"
                @click="selectContact(contact)"
              >
                <el-avatar :size="40" :src="contact.avatar">{{ contact.name.charAt(0) }}</el-avatar>
                <div class="contact-info">
                  <div class="contact-name">{{ contact.name }}</div>
                  <div class="contact-preview">{{ contact.lastMessage }}</div>
                </div>
                <div class="contact-meta">
                  <div class="contact-time">{{ contact.lastTime }}</div>
                  <el-badge :value="contact.unread" :hidden="contact.unread === 0"></el-badge>
                </div>
              </div>
            </div>
          </div>
        </el-aside>
        
        <!-- 右侧消息内容 -->
        <el-main class="message-main">
          <!-- 聊天界面 -->
          <div v-if="activeTab === 'chat' && currentContact" class="chat-container">
            <div class="chat-header">
              <div class="chat-title">{{ currentContact.name }}</div>
              <div class="chat-actions">
                <el-button type="text" icon="el-icon-phone" title="语音通话"></el-button>
                <el-button type="text" icon="el-icon-video-camera" title="视频通话"></el-button>
                <el-button type="text" icon="el-icon-more" title="更多"></el-button>
              </div>
            </div>
            
            <div class="chat-messages" ref="chatMessages">
              <div 
                v-for="(message, index) in currentChatMessages" 
                :key="index"
                class="message-item"
                :class="{ 'message-self': message.isSelf }"
              >
                <el-avatar 
                  :size="40" 
                  :src="message.isSelf ? userInfo.avatar : currentContact.avatar"
                >{{ message.isSelf ? userInfo.name.charAt(0) : currentContact.name.charAt(0) }}</el-avatar>
                <div class="message-content">
                  <div class="message-text">{{ message.content }}</div>
                  <div class="message-time">{{ message.time }}</div>
                </div>
              </div>
            </div>
            
            <div class="chat-input">
              <div class="input-tools">
                <el-button type="text" icon="el-icon-picture" title="发送图片"></el-button>
                <el-button type="text" icon="el-icon-paperclip" title="发送文件"></el-button>
                <el-button type="text" icon="el-icon-position" title="发送位置"></el-button>
              </div>
              <el-input
                type="textarea"
                v-model="newMessage"
                :rows="3"
                placeholder="输入消息..."
                @keyup.enter.native="sendMessage"
              ></el-input>
              <div class="input-actions">
                <el-button type="primary" @click="sendMessage" :disabled="!newMessage.trim()">发送</el-button>
              </div>
            </div>
          </div>
          
          <!-- 消息列表 -->
          <div v-else-if="activeTab !== 'chat'" class="message-list-container">
            <div v-if="currentMessages.length === 0" class="empty-message">
              <i class="el-icon-chat-dot-square"></i>
              <p>暂无消息</p>
            </div>
            <div v-else class="message-list">
              <div 
                v-for="(message, index) in currentMessages" 
                :key="index"
                class="message-list-item"
                :class="{ unread: !message.read }"
                @click="viewMessage(message)"
              >
                <div class="message-list-icon">
                  <i :class="getIconByType(message.type)"></i>
                </div>
                <div class="message-list-content">
                  <div class="message-list-title">{{ message.title }}</div>
                  <div class="message-list-text">{{ message.content }}</div>
                  <div class="message-list-time">{{ message.time }}</div>
                </div>
                <div class="message-list-actions">
                  <el-button type="text" icon="el-icon-delete" @click.stop="deleteMessage(message)"></el-button>
                  <el-button v-if="!message.read" type="text" icon="el-icon-check" @click.stop="markRead(message)"></el-button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 选择联系人提示 -->
          <div v-else class="select-contact-tip">
            <i class="el-icon-chat-dot-square"></i>
            <p>请选择一个联系人开始聊天</p>
          </div>
        </el-main>
      </el-container>
    </el-container>
    
    <!-- 新增聊天对话框 -->
    <el-dialog
      title="发起聊天"
      :visible.sync="newChatDialogVisible"
      width="400px">
      <div class="new-chat-search">
        <el-input
          placeholder="搜索用户..."
          prefix-icon="el-icon-search"
          v-model="userSearchKeyword"
          clearable
        ></el-input>
      </div>
      
      <div class="new-chat-users">
        <div 
          v-for="user in filteredUsers" 
          :key="user.uuid"
          class="new-chat-user-item"
          @click="startChat(user)"
        >
          <el-avatar :size="40" :src="user.avatar">{{ user.name.charAt(0) }}</el-avatar>
          <div class="user-info">
            <div class="user-name">{{ user.name }}</div>
            <div class="user-account">{{ user.account }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入消息页面JS -->
  <script src="./js/message.js"></script>
</body>
</html> 